<template>
	<view class="home-header">
		<swiper :circular="true" :autoplay="autoplay" @change="changeSwiper" class="swiper-con">
			<swiper-item v-for="(item, index) in listData" :key="index">
				<view
					@click.stop="jumpLinkTo(item.link)"
					class="swiper-item"
					:style="{
						backgroundImage: `url(${item.image_url})`,
					}"
				></view>
			</swiper-item>
		</swiper>
		<up-sticky>
			<view class="top-area" :style="{ 'background-color': navbarcfg.bgColor }">
				<view
					class="navbar flex-a space-between"
					:style="{
						height: titleHeight + 'px',
						marginTop: commonStore.statusBarHeight + 'px',
						paddingRight: `calc(18rpx + ${menuWidth}px)`,
					}"
				>
					<view class="flex-a">
						<image :src="imgBaseUrl + 'icon-location.png'" class="icon-40" />
						<text class="ml-8 mr-8 local-title text-ellipsis">
							{{ subString("恩施", 5, false) }}
						</text>
						<image :src="imgBaseUrl + 'icon-dropdown.png'" class="icon-32 mt-5" />
					</view>

					<view class="search-box">
						<u-search
							:clearabled="true"
							height="64rpx"
							:disabled="true"
							:showAction="false"
							searchIconColor="#4E5969"
							searchIconSize="24"
							borderColor="rgba(255,255,255,0.08)"
							placeholder-color="#86909c"
							placeholder="景区/线路/酒店"
							:inputStyle="{ fontSize: '24rpx', margin: '0 0 0 2rpx' }"
							@click.stop="navigateTo('/pages/feed/search/index')"
						/>
					</view>
				</view>
			</view>
		</up-sticky>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"
import { getMenuButtonRectVal } from "@/utils/system"
import { subString } from "@/mixins/mixins"
import { jumpLinkTo, navigateTo } from "@/utils/page-redirect"
import { onHide, onShow } from "@dcloudio/uni-app"
const commonStore = useCommonStore()
const imgBaseUrl = inject("imgBaseUrl")
const autoplay = ref(true)

const props = defineProps({
	listData: {
		type: Array,
		default: () => [],
	},
	scrollY: {
		type: Number,
		default: 0,
	},
})

const navbarcfg = ref({
	bgColor: "transparent",
})
watch(
	() => props.scrollY,
	(newVal) => {
		// isWhite.value = newVal > 100
		if (newVal > 100) {
			let opacity = Math.min((newVal - 100) / 100, 1)
			navbarcfg.value = {
				bgColor: `rgba(251,251,252,${opacity})`,
			}
		} else {
			navbarcfg.value = { bgColor: "transparent" }
		}
	}
)

const titleHeight = ref<number>(0)
const menuWidth = ref<number>(0)
const swiperHyIndex = ref<number>(0)
const changeSwiper = (e: any) => {
	swiperHyIndex.value = e.current
}
onMounted(() => {
	//获取胶囊位置和导航栏高度
	const { menuWidthVal, titleHeightVal } = getMenuButtonRectVal()
	menuWidth.value = menuWidthVal
	titleHeight.value = titleHeightVal
})
onShow(() => {
	autoplay.value = true
})
onHide(() => {
	autoplay.value = false
})
</script>
<style lang="scss" scoped>
.home-header {
	width: 750rpx;
	height: 674rpx;
	position: relative;
	.swiper-con,
	.swiper-item {
		width: 100%;
		height: 100%;
		background-position: center center;
		background-size: cover;
	}
}
.top-area {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding-bottom: 8rpx;
}
.navbar {
	padding-left: 32rpx;
	.local-title {
		font-size: 36rpx;
		font-weight: 600;
	}
}
.search-box {
	width: 272rpx;
}
</style>
